<template>
  <div 
    class="scale-component"
    :class="[
      `scale-${componentData.props.scaleStyle || 'line'}`,
      { 'show-values': componentData.props.showValues }
    ]"
    :style="scaleStyle"
  >
    <div class="scale-container">
      <!-- 比例尺主体 -->
      <div class="scale-main">
        <!-- 线条样式 -->
        <div v-if="componentData.props.scaleStyle === 'line'" class="scale-line">
          <div class="scale-bar"></div>
          <div class="scale-marks">
            <div 
              v-for="(mark, index) in scaleMarks" 
              :key="index"
              class="scale-mark"
              :style="{ left: mark.position + '%' }"
            >
              <div class="mark-line"></div>
              <div v-if="componentData.props.showValues" class="mark-value">
                {{ mark.value }}{{ componentData.props.scaleUnit || 'm' }}
              </div>
            </div>
          </div>
        </div>
        
        <!-- 条形样式 -->
        <div v-else-if="componentData.props.scaleStyle === 'bar'" class="scale-bar-style">
          <div class="scale-segments">
            <div 
              v-for="(segment, index) in scaleSegments" 
              :key="index"
              class="scale-segment"
              :class="{ 'segment-dark': index % 2 === 0 }"
            ></div>
          </div>
          <div class="scale-marks">
            <div 
              v-for="(mark, index) in scaleMarks" 
              :key="index"
              class="scale-mark"
              :style="{ left: mark.position + '%' }"
            >
              <div class="mark-line"></div>
              <div v-if="componentData.props.showValues" class="mark-value">
                {{ mark.value }}{{ componentData.props.scaleUnit || 'm' }}
              </div>
            </div>
          </div>
        </div>
        
        <!-- 圆形样式 -->
        <div v-else-if="componentData.props.scaleStyle === 'circle'" class="scale-circle">
          <div class="circle-container">
            <div class="circle-segments">
              <div 
                v-for="(segment, index) in scaleSegments" 
                :key="index"
                class="circle-segment"
                :class="{ 'segment-dark': index % 2 === 0 }"
                :style="{ 
                  transform: `rotate(${index * (360 / scaleSegments.length)}deg)`,
                  width: `${componentData.props.scaleLength || 100}px`
                }"
              ></div>
            </div>
            <div class="circle-center">
              <div class="center-text">{{ componentData.props.scaleUnit || 'm' }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 比例尺标签 -->
      <div class="scale-label">
        <span>比例尺</span>
        <span v-if="componentData.props.showValues" class="scale-unit">
          ({{ componentData.props.scaleUnit || 'm' }})
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { ComponentConfig } from '../../interface'

// Props
interface Props {
  componentData: ComponentConfig
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  update: [component: ComponentConfig]
  delete: [componentId: string]
}>()

// 计算比例尺样式
const scaleStyle = computed(() => {
  const style = props.componentData.style || {}
  const length = props.componentData.props.scaleLength || 100
  
  const computedStyle = {
    width: length + 'px',
    height: 'auto',
    backgroundColor: style.backgroundColor || 'transparent',
    borderColor: style.borderColor || 'transparent',
    borderWidth: (style.borderWidth || 0) + 'px',
    borderRadius: (style.borderRadius || 0) + 'px',
    opacity: style.opacity !== undefined ? style.opacity : 1,
    boxSizing: 'border-box',
    ...style
  }
  
  console.log('ScaleComponent: scaleStyle computed, style:', style)
  console.log('ScaleComponent: final computedStyle:', computedStyle)
  
  return computedStyle
})

// 计算刻度标记
const scaleMarks = computed(() => {
  const length = props.componentData.props.scaleLength || 100
  const unit = props.componentData.props.scaleUnit || 'm'
  
  // 根据单位计算合适的刻度值
  let baseValue = 1
  let unitLabel = unit
  
  if (unit === 'km') {
    baseValue = 1000
    unitLabel = 'km'
  } else if (unit === 'mi') {
    baseValue = 1609.34
    unitLabel = 'mi'
  } else if (unit === 'nmi') {
    baseValue = 1852
    unitLabel = 'nmi'
  }
  
  const marks = []
  const markCount = Math.floor(length / 20) // 每20px一个标记
  
  for (let i = 0; i <= markCount; i++) {
    const position = (i / markCount) * 100
    const value = Math.round((i / markCount) * length / baseValue * 10) / 10
    
    marks.push({
      position,
      value: value === 0 ? 0 : value
    })
  }
  
  return marks
})

// 计算分段
const scaleSegments = computed(() => {
  const length = props.componentData.props.scaleLength || 100
  const segmentCount = Math.floor(length / 10) // 每10px一个分段
  
  return Array.from({ length: segmentCount }, (_, i) => i)
})
</script>

<style lang="scss" scoped>
.scale-component {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  
  .scale-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .scale-main {
    width: 100%;
    position: relative;
    
    // 线条样式
    .scale-line {
      position: relative;
      height: 20px;
      
      .scale-bar {
        width: 100%;
        height: 2px;
        background-color: #303133;
        margin: 9px 0;
      }
      
      .scale-marks {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        .scale-mark {
          position: absolute;
          top: 0;
          
          .mark-line {
            width: 1px;
            height: 20px;
            background-color: #303133;
          }
          
          .mark-value {
            position: absolute;
            top: 22px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
            color: #606266;
            white-space: nowrap;
          }
        }
      }
    }
    
    // 条形样式
    .scale-bar-style {
      position: relative;
      height: 20px;
      
      .scale-segments {
        display: flex;
        width: 100%;
        height: 100%;
        
        .scale-segment {
          flex: 1;
          height: 100%;
          background-color: #e4e7ed;
          
          &.segment-dark {
            background-color: #c0c4cc;
          }
        }
      }
      
      .scale-marks {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        .scale-mark {
          position: absolute;
          top: 0;
          
          .mark-line {
            width: 1px;
            height: 20px;
            background-color: #303133;
          }
          
          .mark-value {
            position: absolute;
            top: 22px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
            color: #606266;
            white-space: nowrap;
          }
        }
      }
    }
    
    // 圆形样式
    .scale-circle {
      position: relative;
      width: 100%;
      height: 100px;
      
      .circle-container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .circle-segments {
          position: absolute;
          width: 100%;
          height: 100%;
          
          .circle-segment {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 2px;
            background-color: #e4e7ed;
            transform-origin: left center;
            
            &.segment-dark {
              background-color: #c0c4cc;
            }
          }
        }
        
        .circle-center {
          width: 30px;
          height: 30px;
          background-color: #409eff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 10px;
          font-weight: bold;
        }
      }
    }
  }
  
  .scale-label {
    margin-top: 8px;
    font-size: 12px;
    color: #909399;
    text-align: center;
    
    .scale-unit {
      margin-left: 4px;
      color: #c0c4cc;
    }
  }
  
  // 样式变体
  &.scale-modern {
    .scale-main .scale-line .scale-bar,
    .scale-main .scale-bar-style .scale-segments .scale-segment {
      background-color: #67c23a;
    }
    
    .scale-main .scale-circle .circle-center {
      background-color: #67c23a;
    }
  }
  
  &.scale-minimal {
    .scale-main .scale-line .scale-bar,
    .scale-main .scale-bar-style .scale-segments .scale-segment {
      background-color: #909399;
    }
    
    .scale-main .scale-circle .circle-center {
      background-color: #909399;
    }
  }
}
</style>
